<template>
  <!-- van-list:分页
             v-model:是否处于加载中
             finished:是否加载全部完成
             finished-text:加载完成后的文本显示
             @load=()=>{
              // 当滚动条距离底部小于300自动执行，没有滚动条，相当于距离 是0,也会执行
               1:调用接口实现加载
               2：调用完成：
                  loading值变成false
                  数据要累加
                  下一页加载时条件改变（如页码+1之类的）
                  判断是否加载完成，如果完成finished=true
             }

  -->
  <div>
    <div class="list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="load"
      >
        <h1 v-for="(item, index) in list" :key="index">{{ item }}</h1>
      </van-list>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      loading: false,
      finished: false,
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
    }
  },
  methods: {
    load () {
      console.log('load')
      setTimeout(() => {
        this.loading = false
        // list数据想累加，每次随机加一个值上去，当长度超过20时，加载完成
        this.list.push(Math.random() * 999)
        if (this.list.length >= 20) {
          this.finished = true
        }
      }, 2000)
    }
  }
}
</script>
<style lang="less" scoped>
.list {
  width: 300px;
  height: 200px;
  border: 10px solid red;
  overflow: auto;
}
</style>
